<script setup>

</script>

<template>
<div class="w">
  <div class="top-item-box">
    <router-link to="/ai/assistant">AI助教</router-link>
    <router-link to="/ai/analyze">AI心理分析</router-link>
  </div>
  <div style="margin-top: 20px;position: relative">
    <router-view></router-view>
  </div>
</div>
</template>

<style scoped>
.w {
  width: 1320px;
  margin: 0 auto;
}
.top-item-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px;
  width: 300px;
  height: 40px;
  margin: 20px auto 0;
  border-radius: 30px;
  background-color: white;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  font-size: 18px;
}
.top-item-box a{
  display: block;
  padding: 5px 36px;
  border-radius: 18px;
  transition: all 0.3s ease;
}
a:hover {
  background-color: #e1eeff;
  color: #3b8cfb;
}
.router-link-active {
  color: #3b8cfb;
  background-color: #e1eeff;
}
</style>